<template>
	<view>
		<view>
			<view class="box mt20 br20 bg-white shadow flex-box flex-align-end">
				<view class="flex-1">
					<view class="col-3 mb30"><text class="fs30">我的团队</text><text class="fs24">(人)</text></view>
					<view class="fwb col-3 fs36">{{teamCount}}</view>
				</view>
				<view class="btn bg-1" @click="showCanvas()">立即邀请</view>
			</view>

			<view class="mt20 plr20 br20 bg-white shadow">
				<!-- mescroll-body start -->
				<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="record flex-box ptb40 plr10" v-for="(item,index) in teamList">
						<image class="head mr25" :src="item.user.avatar" mode="aspectFill"></image>
						<view class="flex-1">
							<view class="flex-box mb25">
								<view class="flex-1">{{item.user.nickname}}</view>
								<view class="">{{item.bindtime_text}}</view>
							</view>
							<view class="flex-1">通过邀请注册</view>
						</view>
					</view>
				</mescroll-body>
				<!-- mescroll-body end -->
			</view>

		</view>
		 <canvas style="width: 650px;height: 1064px;position: fixed;top: -999em;right: -999em;" canvas-id="myCanvas" id="myCanvas1"></canvas>
		<u-popup v-model="canvasPop" mode="center" :custom-style="{background:'transparent'}" :closeable="true" :width="'90%'" :borderRadius="20" @close="canvasPop = false">
			<view class="tui-poster__box">
				<!-- <image src="/static/images/layout/icon_popup_closed.png" class="tui-close__img" @tap.stop="hideModal"></image> -->
				<view class="tui-poster__scroll">
					<image :src="imgPath" v-if="imgPath" class="tui-poster__img" mode="widthFix"></image>
				</view>
				<u-button :custom-style="{width:'380rpx',height:'70rpx',background:'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)',fontSize:'28rpx',color:'#FFFFFF'}" shape="circle" :ripple="true" @click="savePoster">保存图片</u-button>
				<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	 import canvas from '@/common/canvas.js'
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				teamCount:0,
				teamList:[],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '暂无最新活动哦'
					}
				},
				canvasPop: false, //海报弹窗
				ewmImg: {}, // 二维码图片信息
				posterImg: {},
				avatarImg: {}, // 头像信息
				isShow: false, //显示保存按钮
				imgPath: "", //生成的图片路径
				
			}
		},
		onLoad() {

		},
		methods: {
			bindSharePoster(){
				uni.navigateTo({
					url: '/pages/my/share/share'
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				that.$core.post({url:'fitness.user/team_lists',data:{page:page.num,pagesize:page.size},success:(ret)=>{
					if(page.num == 1) that.teamList = []; //如果是第一页需手动制空列表
					that.teamCount = ret.data.total
					that.teamList = that.teamList.concat(ret.data.data); //追加新数据
					that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			
			//海报
			showCanvas() {
			    if (!this.$core.getUserinfo(true)) {
			        return '';
			    }
			    this.$core.get({
			        url: 'fitness.user/poster_info',
			        data: {},
			        success: ret => {
			            this.loadCavas(ret.data);
			        },
			        fail: err => {
			            console.log(err);
			        }
			    })
			},
			async loadCavas(poster) {
			    let that = this;
			    // 获取背景图，二维码信息等，APP端会返回图片的本地路径（H5端只能返回原路径）
			    let avatarImgUrl = poster.img1;
			    let ewmImgUrl = poster.img2;
			    that.avatarImg = await that.getImageInfo(avatarImgUrl);
				that.posterImg = await that.getImageInfo(poster.poster_image);
			    that.ewmImg = await that.getImageInfo(ewmImgUrl);
			
			    // 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
			    if (that.ewmImg.errMsg == 'getImageInfo:ok' && that.avatarImg.errMsg == 'getImageInfo:ok') {
			        console.log('读取图片信息成功')
			        uni.showLoading({
			            icon: 'loading',
			            mask: true,
			            title: '海报绘制中',
			        });
			        setTimeout(() => {
			            // 获取canvas上下文
			            var ctx = uni.createCanvasContext('myCanvas', that);
			            // 1.填充背景色，白色
			            ctx.setFillStyle('#fff'); // 默认白色
			            ctx.fillRect(0, 0, 650, 1064) // fillRect(x,y,宽度，高度)
			
			            // 2. 绘制头像，昵称
			            canvas.clipCircleImg(ctx, 30, 30, 25, that.avatarImg.path);
			            canvas.fillTextCut(ctx, poster.nickname, 32, 32, 100, 39, 550, 1, false, "#333");
			
			            // 3.绘制背景图
			            ctx.drawImage(that.posterImg.path, 30, 110, 590, 750); // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
			
			            // 4.绘制紫色矩形
			            canvas.clipRoundRect(ctx, 0, 912, 650, 152, 0, '#6D4BBE');
			
			            // 5.绘制提示语
			            canvas.fillTextCut(ctx, poster.text2, 34, 34, 30, 947, 308, 1, false, "#FFFFFF");
			            canvas.fillTextCut(ctx, poster.text3, 28, 28, 30, 1001, 308, 1, false, "#FFFFFF");
			
			            // 6.绘制二维码
			            ctx.drawImage(that.ewmImg.path, 520, 938, 100, 100); // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
			
			            // draw方法 把以上内容画到 canvas 中
			            ctx.draw(true, (ret) => {
			                that.isShow = true // 显示按钮-保存图片到相册
			                uni.canvasToTempFilePath({ // 保存canvas为图片
			                    canvasId: 'myCanvas',
			                    quality: 1,
			                    complete: function(res) {
			                        // 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
			                        that.imgPath = res.tempFilePath;
			                        uni.setStorageSync('filePath', res.tempFilePath); //保存临时文件路径到缓存
			                        that.canvasPop = true;
									 uni.hideLoading();
			                    },
			                })
			            });
			        }, 1500)
			
			    } else {
			        console.log('读取图片信息失败');
			    }
			},
			// 获取图片信息
			getImageInfo(image) {
			    return new Promise((req, rej) => {
			        uni.getImageInfo({
			            src: image,
			            success: function(res) {
			                req(res)
			            },
			        });
			    })
			},
			// 保存图片到相册
			savePoster() {
			    let imgPath = this.imgPath
			    uni.saveImageToPhotosAlbum({
			        filePath: imgPath,
			        success(res) {
			            uni.showToast({
			                icon: 'success',
			                mask: true,
			                title: '保存成功',
			            });
			        },
			        fail(res) {
			            console.log(res.errMsg)
			        }
			    })
			}
			
		}
	}
</script>
<style scoped>
	.bg-white{background-color: var(--white);}
	.flex-box{display: flex;align-items: center;}
	.flex-1{flex: 1;overflow: hidden;}
	.flex-align-end{align-items: flex-end;}
	.bg-1{background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);}
	.shadow {
		box-shadow: 0 7rpx 29rpx 0 rgba(33, 33, 33, 0.07);
	}

	.box {
		padding: 60rpx;
	}

	.btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
	
	.mt20{margin-top: 20rpx}
	
	.mb25{margin-bottom: 25rpx}
	
	.plr10{padding-left: 10rpx;padding-right:10rpx}
	.plr20{padding-left: 20rpx;padding-right:20rpx}
	
	.br20{border-radius: 20rpx}
	
	.ptb40{padding-top: 40rpx;padding-bottom:40rpx}
	
	.mr25{margin-right: 25rpx}

	.record+.record {
		border-top: 1rpx solid #EFEFEF;
	}

	.record .head {
		display: block;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	
	.tui-poster__canvas {
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}
	
/* 	.tui-poster__scroll {
		max-height: 70vh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	} */

	.tui-poster__img {
		display: block;
		width: 675rpx;
		height: auto;
		margin-bottom: 40rpx;
	}
	
	.tui-share__tips {
		font-size: 24rpx;
		transform: scale(0.8);
		text-align: center;
		transform-origin: center center;
		color: #ffffff;
		color: #000;
		padding-top: 12rpx;
	}
</style>
